<template>
  <div class="imgCont" ref="imgCont" @mousewheel.prevent="rollImg($event)">
    <div class="iconBtn">
      <span class="refreshBtn">
        <i :class="mode.icon" @click="toggleMode"></i>
        <i class="el-icon-zoom-out" @click.stop="outImg('out')"></i>
        <i class="el-icon-zoom-in" @click.stop="outImg('in')"></i>
        <i class="el-icon-download" @click.stop="download()"></i>
        <div class="see-btn" @click.stop="see()">
          <svg-icon :icon-class="[showOverlay ? 'see' : 'notsee']" />
        </div>
        <div
          :class="[dotClick ? 'dot-click' : 'dot-click-not']"
          @click.stop="dotclick()"
        >
          <svg-icon icon-class="dotclick" />
        </div>
        <!-- <i @click.stop="rotate('left')" class="el-icon-refresh-left"></i>
        <i
          @click.stop="rotate('right')"
          class="el-icon-refresh-right right"
        ></i> -->
        <slot name="addIcon"></slot>
      </span>
    </div>
    <div class="image-content">
      <img
        :class="[dotClick?'':'bigImageMove','bigImage']"
        ref="imgDiv"
        @mousedown.stop.prevent="mousedown"
        id="img"
        :src="url"
      />
       <!-- <el-image :class="[dotClick?'':'bigImageMove','bigImage']"  ref="imgDiv"   id="img"  :src="url" class="inner-img" @mousedown.stop.prevent="mousedown" v-loading="isLoading" /> -->
      <!-- <img
        class="bigImage"
        ref="imgDiv"
     
        @mousedown.stop.prevent="moveImg($event)"
        id="img"
        :src="url"
      /> -->
    </div>
  </div>
</template>

<script>
import { downloadFileByUrl } from "@/utils/index";
const Mode = {
  CONTAIN: {
    name: "contain",
    icon: "el-icon-full-screen",
  },
  ORIGINAL: {
    name: "original",
    icon: "el-icon-c-scale-to-original",
  },
};
export default {
  name: "imgDeal",
  props: {
  
    showOverlay: false,
    url: null,
  },
  components: {},
  data() {
    return {
      seeIcon: "see",
      mode: Mode.CONTAIN,
      // 图片参数
      params: {
        zoomVal: 1,
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
      },
      deg: 0,
      naturalWidth: 0,
      naturalHeight: 0,
      dotClick: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.restImg();
  },
  mounted() {
    const image = this.$refs.imgDiv;
    image.addEventListener("load", () => {
      this.naturalWidth = image.naturalWidth;
      this.naturalHeight = image.naturalHeight;
 
    });
  },
  methods: {
    dotclick() {
      this.dotClick = !this.dotClick;
      this.$emit("resetImg",this.dotClick)
     
    },
    handleClick(event) {
      const image = this.$refs.imgDiv;
      const rect = image.getBoundingClientRect();
 
      const y = Math.round(
        (event.clientX - rect.left)*(this.naturalWidth/rect.width)
      );
      const x = Math.round(
        (event.clientY - rect.top)*(this.naturalWidth/rect.width)
      );
      console.log(this.params.zoomVal ,y, x, "####y" )
      this.$emit("highlight", { x, y });
      this.$emit("predictions", { x, y });
    },
    see() {
      this.dotClick = false
      this.$emit("imageToggleOverlay");
    },
    download() {
  
      let name = this.url.substring(this.url.lastIndexOf("\/") + 1,this.url.length) 
      downloadFileByUrl(this.url, name);
    },
    //1:1自适应
    toggleMode() {
      const modeNames = Object.keys(Mode);
      const modeValues = Object.values(Mode);
      const index = modeValues.indexOf(this.mode);
      const nextIndex = (index + 1) % modeNames.length;
      this.mode = Mode[modeNames[nextIndex]];
      if (this.mode.name == "original") {
        this.originalFunc();
      } else {
        this.restImg();
      }
    },
    // mode==original 默认放大图片
    originalFunc() {
      this.params.zoomVal = 2;
      this.restFunc();
    },
    // 初始化数据,重置数据
    restImg() {
      this.params.zoomVal = 1;
      this.restFunc();
      this.mode = Mode["CONTAIN"];
    },
    restFunc() {
      this.params.left = 0;
      this.params.top = 0;
      this.params.currentX = 0;
      this.params.currentY = 0;
      this.deg = 0;
      if (this.$refs.imgDiv) {
        let img = this.$refs.imgDiv;
        img.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`;
        img.style.left = "50%";
        img.style.top = "50%";
      }
    },
    // 图片滚动放大
    rollImg(event) {
      this.params.zoomVal += event.wheelDelta / 1200;
      this.rollFunc();
    },
    outImg(flag) {
      if (flag == "out") {
        this.params.zoomVal -= 0.2;
      } else {
        this.params.zoomVal += 0.2;
      }
 

      this.rollFunc();
    },
    rollFunc() {
      let e = this.$refs.imgDiv;
      if (this.params.zoomVal >= 0.2) {
        e.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`;
      } else {
        this.params.zoomVal = 0.2;
        e.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`;
        return false;
      }
    },

    // 图片旋转
    rotate(type) {
      let res = this.$refs.imgDiv;
      this.deg = type == "right" ? this.deg + 90 : this.deg - 90;
      res.style.transform = `translate(-50%, -50%) scale(${this.params.zoomVal}) rotate(${this.deg}deg)`;
    },
    mousedown(e) {
      if (this.dotClick) {
        this.handleClick(e);
      } else {
        this.moveImg(e);
      }
    },
    // 图片移动
    moveImg(e) {
      // 获得该时间触发的时间戳
      let mouseDate = new Date().getTime();
      this.$emit("getMouseDate", mouseDate);
      e.preventDefault();
      // 获取元素
      let imgWrap = this.$refs.imgCont;
      let img = this.$refs.imgDiv;
      let x = e.pageX - img.offsetLeft;
      let y = e.pageY - img.offsetTop;
      // 添加鼠标移动事件
      imgWrap.addEventListener("mousemove", move);
      function move(e) {
        img.style.left = e.pageX - x + "px";
        img.style.top = e.pageY - y + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      img.addEventListener("mouseup", () => {
        imgWrap.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      imgWrap.addEventListener("mouseout", () => {
        imgWrap.removeEventListener("mousemove", move);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.see-btn {
  cursor: pointer;
  margin: 0 10px;
  .svg-icon {
    fill: #6c63ae;
  }
}
.dot-click {
  cursor: pointer;
  .svg-icon {
    fill: #6c63ae;
  }
}
.dot-click-not {
  cursor: pointer;
  .svg-icon {
    fill: #afafaf;
  }
}
.imgCont {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .iconBtn {
    position: relative;
    height: 35px;
    line-height: 35px;
    background-color: rgba(255, 255, 255, 1);
    color: #6c63ae;
    width: 100%;
    z-index: 100;
    font-size: 20px;
    .refreshBtn {
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin: 0 10px;
      }
    }
  }
  .image-content {
    display: flex;
    flex: 1;
    .bigImageMove {
      cursor: move;
    }
    .bigImage {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      margin: 0 auto;
    }
  }
}
</style>

